<template>
  <div>
    <common-head title="购物车"></common-head>
    <!-- 商品 -->
    <div class="cart-wrap">
      <van-button v-if="!checkLogin()">登录了我就看不见了</van-button>
      <div v-if="!carts.items.length">暂无商品请前往添加</div>
     <van-swipe-cell v-for="(item, index) in carts.items" :key="item.id">
      <div class="item">
          <van-checkbox @click="singleChange" v-model="item.isChecked"></van-checkbox>
          <van-card
          :price="(item.minPrice*item.num).toFixed(2)"
          :title="item.name"
          class="goods-card"
          :thumb="item.pic"
        >
          <template #tags>
            <van-stepper v-model="item.num" @change="numChange"></van-stepper>
          </template>
          </van-card>
      </div>
      <template #right>
        <van-button square text="删除" @click="del(index)" type="danger" class="delete-button" />
      </template>
    </van-swipe-cell>
    </div>
    <!-- /商品 -->
    <!-- 提交购物车 -->
    <van-submit-bar :price="carts.total*100" button-text="提交订单" @submit="onSubmit">
      <van-checkbox @click="allCheckedChange" v-model="carts.isAllChecked">全选</van-checkbox>
    </van-submit-bar>
    <!-- /提交购物车 -->
    <my-tabbar></my-tabbar>
  </div>
</template>

<script>
import MyTabbar from '@components/MyTabbar'
import CommonHead from '@components/CommonHead'
import { mapState, mapActions, mapMutations } from 'vuex'
import { checkLogin } from '@utils'
// import { Dialog } from 'vant'
export default {
  components: {
    MyTabbar,
    CommonHead
  },
  mounted () {
    this.calc_total()
  },
  methods: {
    checkLogin,
    allCheckedChange () {
      // 全选状态切换
      this.setAllCheckedState(this.carts.isAllChecked)
      this.calc_total()
    },
    singleChange () {
      // 切换商品选中状态
      // console.log( this.carts.items )
      this.setCarts(this.carts)
      // 调用总价格
      this.calc_total()
      // 判断全选
      const items = this.carts.items
      const allChecked = items.every(item => item.isChecked)
      console.log(allChecked)
      // 去改变vuex allChecked
      this.setAllChecked(allChecked)
    },
    del (index) {
      // 删除商品
      this.$dialog.confirm({
        title: '删除商品',
        message: '确认删除吗？'
      })
        .then(() => {
          this.delItem(index)
          this.calc_total()
        })
    },
    numChange () {
      // 修改商品数量
      this.setCarts(this.carts)
      this.calc_total()
    },
    onSubmit () {
      if (this.checkLogin()) {
        const checkedItems = this.carts.items.filter(el => el.isChecked)
        /*
        生成订单联系人
        1，去联系人列表中查找
        2，如果联系人列表为空 则联系人为空
        3，找默认联系人
        4，如果没有默认联系人 选择第一个
        */
        // 生成订单数据
        let contact = {}
        if (this.contacts.length > 0) {
          // 说明联系人列表不为空
          const defaultContact = this.contacts.find(el => el.isDefault)
          if (defaultContact) {
            // 有默认联系人
            contact = defaultContact
          } else {
            // 没有默认联系人
            contact = this.contacts[0]
          }
        }
        const nowOrder = {
          code: Date.now(), // 订单编号
          items: checkedItems, // 订单商品
          contact,
          price: this.carts.total
        }
        this.setOrder(nowOrder)
        this.$router.push('/order')
      } else {
        this.$router.push({
          name: 'login',
          params: {
            from: '/cart'
          }
        })
      }
    },
    ...mapActions('cart', ['calc_total']),
    ...mapMutations('cart', ['setCarts', 'delItem', 'setAllChecked', 'setAllCheckedState']),
    ...mapMutations('order', ['setOrder'])
  },
  computed: {
    ...mapState({
      carts: (state) => state.cart.carts,
      contacts: (state) => state.address.contacts
    })
  }
}
</script>

<style lang="scss" scoped>
.cart-wrap{
  padding-top: 46px;
  padding-bottom: 100px;
}
.van-submit-bar{
  bottom:50px;
}
.delete-button {
  height: 100%;
}
.item{
  display: flex;
  .van-checkbox{
    margin:0 5px;
  }
  .goods-card{
    flex: 1;
    .van-card__title{
      margin-bottom:10px;
    }
  }
}
</style>
